<template>
	<div class="user">
		<v-header :back-display="false">
			<div slot="title">个人中心</div>
		</v-header>

		<div class="userbox" v-if="!loginStatus">
			<div class="box-img">
				<img src="@/assets/moren.png" alt />
			</div>
			<div class="box-txt clearfix">
				<div class="txt-left">
					<router-link class="login-btn" to="/login">立即登录</router-link>
					<p>未登录寸步难行</p>
				</div>
				<div class="txt-right">
					<img src="../../assets/right_1.png" alt />
				</div>
			</div>
		</div>

		<div class="userbox" @click="showMsg" v-else>
			<div class="box-img">
				<img :src="userInfo.avatar" alt />
			</div>
			<div class="box-txt clearfix">
				<div class="txt-left">
					<span>{{userInfo.username}}</span>
					<p>请设置个人信息</p>
				</div>
				<div class="txt-right">
					<img src="../../assets/right_1.png" alt />
				</div>
			</div>
		</div>

		<div class="kind clearfix">
			<div v-for="(item,index) in table" :key="index" class="kind-item">
				<router-link :to="item.path" class="router">
					<img :src="item.img" alt />
					<span>{{item.title}}</span>
				</router-link>
			</div>
		</div>

		<van-cell-group class="user-cell">
			<van-cell v-show="loginStatus" title="修改密码" is-link icon="setting-o" to="/password" />
			<van-cell title="意见反馈" is-link icon="edit" to="/feedback" />
			<van-cell v-show="loginStatus" title="退出" is-link @click="showDialog" icon="warning-o" />
		</van-cell-group>
	</div>
</template>

<script>
import header from '@/components/main/header'
import { delCookie } from '@/utils/cookie.js'
import { Cell, CellGroup, Dialog, Toast } from 'vant'
import { mapGetters } from 'vuex'

export default {
	name: 'user',
	components: {
		'v-header': header,
		[Cell.name]: Cell,
		[Toast.name]: Toast,
		[CellGroup.name]: CellGroup,
		[Dialog.Component.name]: Dialog.Component,
	},
	data() {
		return {
			table: [
				// { path: '/develop', img: require('@/assets/user-1.png'), title: '试题收藏' },
				{ path: '/notes', img: require('@/assets/user-2.png'), title: '复习笔记' },
				// { path: '/develop', img: require('@/assets/user-3.png'), title: '我的错题' },
				// { path: '/develop', img: require('@/assets/user-4.png'), title: '学习记录' },
				// { path: '/develop', img: require('@/assets/user-5.png'), title: '我的生词' },
			],
		}
	},
	created() {},
	computed: {
		...mapGetters(['loginStatus', 'userInfo']),
	},
	methods: {
		//退出登录
		showDialog() {
			Dialog.confirm({ message: '您确定退出登录吗?' })
				.then(() => {
					this.$store.dispatch('setSignOut')
					delCookie('jsessionid')
					Toast.success('退出登录成功')
				})
				.catch(() => {
					// 取消
				})
		},

		// 跳转个人信息页面
		showMsg() {
			this.$router.push({ path: '/Personalrepair' })
		},
	},
	mounted() {},
}
</script>

<style lang="less" scoped>
.user {
	background-color: #f1f1f1;
}
.userbox {
	margin: 10px;
	height: 100px;
	padding: 0 15px;
	background-color: #fff;
	border-radius: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.box-img {
		width: 64px;
		height: 64px;
		img {
			display: block;
			border-radius: 50%;
			width: 64px;
			height: 64px;
			object-fit: cover;
		}
	}
	.box-txt {
		width: calc(100% - 80px);
		position: relative;
		.txt-left {
			float: left;
			.login-btn {
				display: block;
				width: 96px;
				height: 32px;
				line-height: 32px;
				border-radius: 36px;
				color: #fff;
				background-color: #ff8333;
				text-align: center;
				font-size: 14px;
				margin-bottom: 12px;
			}
			p {
				font-size: 14px;
				color: #666;
			}
			span {
				font-size: 18px;
				color: #323232;
				margin-bottom: 12px;
				display: inline-block;
			}
		}
		.txt-right {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			width: 20px;
			img {
				display: block;
				width: 100%;
			}
		}
	}
}

.kind {
	margin: 0 10px;
	padding: 20px 10px;
	background-color: #fff;
	border-radius: 10px;
	.kind-item {
		width: 30%;
		margin-right: 5%;
		margin-top: 20px;
		float: left;
		.router {
			display: block;
			img {
				display: block;
				width: 36px;
				height: 36px;
				margin: 0 auto;
			}
			span {
				display: block;
				text-align: center;
				margin-top: 10px;
				font-size: 13px;
			}
		}
	}
	.kind-item:nth-child(3n + 3) {
		margin-right: 0;
	}
	.kind-item:nth-child(-n + 3) {
		margin-top: 0;
	}
}

.user-cell {
	margin: 10px 0;
}
.van-cell__left-icon {
	margin-right: 12px;
}
</style>
